<template>
  <div class="banner-3d">
    <!-- <div class="banner-item" v-for="(item, index) in bannerList" :key="index" :style="`{transform: rotateY(${item.angle}deg)}`">
      {{ index }}啥
    </div> -->
    <div class="banner-item" :style="getAngle">这个是测试书</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [
        { angle: 20 },
        { angle: 40 },
        { angle: 60 },
        { angle: 80 },
        { angle: 100 },
        { angle: 120 },
        { angle: 140 }
      ],
      angle: 0,
    };
  },
  methods: {
    // getAngle(item){
    //   return `transform: rotateY(${item}deg);`
    // }

  },
  created(){
    setInterval(() => {
      this.angle = this.angle + 10
    },1000)
  },
  computed: {
    getAngle() {
      let angle = this.angle;
      let styleObject = {
        "transform": `rotate3d(0.5,1,0.5,${angle}deg)`,
        // "perspective": `${angle}px`,
        "color": "blue",
        "transform-origin": "20% 40%"
      }
      console.log(styleObject)
      return styleObject;
    }
  }
};
</script>

<style lang="scss">
.banner-3d {
  display: flex;
  justify-content: center;
  .banner-item {
    width: 100px;
    height: 200px;
    background-color: crimson;
    position: absolute;
  }
  .test {
    transform: rotateY(180deg);
    transform-origin: 0 100px;
  }
}
</style>